<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 注意：html的属性中不区分大小写，即驼峰式的书写格式不支持，应该换成用 - 连接2个都是小写的单词 -->
    <!-- <com1 v-bind:sendMsg="msg"></com1> -->
    <com1 v-bind:send-msg="msg"></com1>
  </div>
  <script src="libs/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '这里是 父组件 的值'
      },
      components: {
        com1: {
          data() {
            return {
              content: '子组件自己内部的数据'
            }
          },
          template: '<h1>这是 子组件 --- {{ sendMsg }}</h1>',
          props: ['sendMsg']
        }
      }
    })

    // 父子组件传值流程：
    // 1.获取父组件要传的值，如 msg
    // 2.在子组件标签上使用 v-bind 绑定一个属性，属性中的值为父组件要传递的值，如 <com1 v-bind:sendMsg="msg"></com1>
    // 3.在子组件中对象中添加 props 属性，该属性是一个数组类型，在数组中添加父组件传递过来的值，如 props: ['sendMsg']
    // 4.在子组件内部使用父组件传递过来的值，如 template: '<h1>这是父组件的值：{{ sendMsg }}</h1>'

    // 注意事项：
    // 1.子组件内部有 data 数据，该数据属于子组件内部的数据，具备 可读可写
    // 2.props 中的数据是父组件中的数据，具备 可读，不能 可写(赋值)
  </script>
</body>
</html>